<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../resources/css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="../../resources/font-awesome/css/font-awesome.css"/>
    <link href="../../resources/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="../../resources/css/pluginsExt/common.css">
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">

        <legend>输入您的名字，邮箱，URL，备注。</legend>
        <p>
            <label for="cname">Name (必需, 最小两个字母)</label>
            <input id="cname" name="name" minlength="2" type="text" required>
        </p>
        <p>
            <label for="cemail">E-Mail (必需)</label>
            <input id="cemail" type="email" name="email">
        </p>
        <p>
            <label for="curl">URL (可选)</label>
            <input id="curl" type="url" name="url">
        </p>
        <p>
            <label for="ccomment">备注 (必需)</label>
            <textarea id="ccomment" name="comment" required></textarea>
        </p>
    <p>
        <label for="ccomment">手机 (必需)</label>
        <input type="url"  date="true" name="pohoneExt" >
    </p>
        <p>
            <input class="submit" type="submit" value="Submit">
        </p>
</form>
</body>
<script src="../../resources/js/jquery-2.1.1.js"></script>
<script src="../../resources/js/plugins/validate/jquery.validate.min.js"></script>
<script src="../../resources/js/plugins/validate/localization/messages_zh.js"></script>
<script src="../../resources/js/bootstrap/bootstrap.min.js"></script>
<script src="validateExt.js"></script>
<script>
    $(function(){
        //启用整个表单的验证规则
        $("#commentForm").validate({
            rules:{
                //
                pohoneExt: {
                    isPhone: true,
                },
            }
        });
    });
    $.validator.setDefaults({
        //提交成功的事件
        submitHandler: function() {
            alert("提交事件!");
        },
    });

</script>
</html>